<style lang="scss" scoped>
$margin: 32rpx;

.order-show {
	min-height: 100vh;
	background-color: #F6F3F7;
}

.order-show-price {
	color: #333;
	font-size: 28rpx;
	margin: 30rpx;
	text-align: right;
}

.order-show-price-actual-unit, .order-show-price-actual-value {
	color: #F24244;
}

.order-show-price-actual-unit {
	font-size: 24rpx;
}

.order-show-price-actual-value {
	font-size: 36rpx;
}

.order-show-cinema-name {
	padding: 32rpx $margin;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
}

.order-show-cinema-name-body {
	flex: 1;
	min-width: 0;
}

.order-show-film-name {
	display: flex;
	margin: 0 $margin;
	padding: 30rpx 0 20rpx 0;
}

.order-show-film-value {
	font-size: 36rpx;
	font-weight: bold;
	flex: 1;
	min-width: 0;
}

</style>

<template>
	<view class="order-show">

		<nav-bar
			title="订单详情"
			fixed
			cover
			@on-back="$navigateBack()"
		></nav-bar>

		<view class="content">
			<view class="list-view-tick">
				<view class="item">

					<!-- 影院名称 -->
					<view class="order-show-cinema-name">
						<view class="order-show-cinema-name-body ellipsis">UME影城（重庆三峡广场店）</view>

						<arrow-right-black></arrow-right-black>
					</view>

					<concave></concave>

					<!-- 电影名称 -->
					<view class="order-show-film-name">

						<view class="order-show-film-value ellipsis">罗小黑战绩</view>

						<state :state="1"></state>
					</view>
					
					<p class="movie-message">
						<span>2019年11月11日 10:25</span>(2D国语)
					</p>
					<p class="hall-num">1号厅 | E排9号 E排10号</p>
					
					<!-- 无令牌 -->
					<no-code></no-code>

					<!-- 分割线 -->
					<concave></concave>

					<!-- 订单号 -->
					<cell
						title="订单号"
						value="21321312312312312312332432"
					></cell>

					<!-- 订单金额 -->
					<cell
						title="订单金额"
						value="¥49.00"
					></cell>

					<!-- 权益优惠 -->
					<cell title="权益优惠">
						<equity-reduction :price="24.5"></equity-reduction>
						<!-- <text>- ¥</text><text>24.5</text> -->
					</cell>
					
					<!-- 优惠券 -->
					<cell title="优惠券">
						<text>- ¥</text><text>20.00</text>
					</cell>

					<!-- 价格 -->
					<view class="order-show-price ellipsis">
						<text>已优惠&nbsp;¥</text>
						<text v-text="49"></text>
						<text style="display:inline-block;padding: 0 10rpx 0 40rpx;">实付款&nbsp;</text>
						<text class="order-show-price-actual-unit">¥</text>
						<text class="order-show-price-actual-value" v-text="0"></text>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>
<script>

// import QRCode from "qrcodejs2";

import Cell from "./cell";
import State from "./state";
import Concave from "./concave";
import EquityReduction from "./equity-reduction";
import ArrowRightBlack from "@/components/arrow-right-black";
import NoCode from "./no-code";

export default {
	components: {
		Cell,
		State,
		NoCode,
		Concave,
		EquityReduction,
		ArrowRightBlack,
	},

	data() {
		return {};
	},
	onLoad() {},
	mounted() {
		// this.getBaecode();
	},
	methods: {
		/**
		 * 生成二维码
		 */
		getBaecode() {
			let that = this;
			let qrcode = new QRCode("qrcode", {
				width: 110,
				height: 110,
				text: "http://www.baidu.com" // 二维码内容
				// render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
				// background: '#f0f',   // 背景色
				// foreground: '#ff0'	// 前景色
			});
		}
	}
};
</script>

<style  lang="scss" scoped>
.content {
	overflow-y: scroll;
	// height: px2vw(600);
}
.index-header {
	text-align: center;
	height: px2vw(245);
	width: 100%;
	background: #333;
	position: relative;
	border-bottom-left-radius: px2vw(15);
	border-bottom-right-radius: px2vw(15);
}
.list-view-tick {
	width: px2vw(355);
	margin: px2vw(20) auto auto auto;
	&:last-child {
		margin-bottom: px2vw(80);
	}
	.item {
		width: px2vw(355);
		// height: px2vw(210);
		margin: 0 auto;
		position: relative;
		border-radius: px2vw(10);
		background-color: #fff;
		// box-shadow: 0 px2vw(4) px2vw(30) #d8d3d3;
		&:after {
			display: block;
			content: "clear";
			clear: both;
			height: 0;
			width: 100%;
			overflow: hidden;
		}
		.top-title {
			height: px2vw(44);
			line-height: px2vw(44);
			font-size: px2vw($fz14);
			padding-left: px2vw(10);
			// background-color: #fffbeb;
			border-top-left-radius: px2vw(10);
			border-top-right-radius: px2vw(10);
			// border-bottom: px2vw(1) dashed #ddd;
			span {
				padding-right: px2vw(20);
				display: block;
				float: right;
			}
		}
		.movie-name {
			height: px2vw(44);
			line-height: px2vw(44);
			// font-size: px2vw($fz14);
			padding-left: px2vw(10);
			margin-top: px2vw(10);
			span {
				height: px2vw(30);
				font-size: px2vw($fz14);
				margin-right: px2vw(20);
				padding: 0 px2vw(5);
				margin-top: px2vw(5);
				line-height: px2vw(30);
				background-color: #f24244;
				text-align: center;
				display: block;
				float: right;
				border-radius: px2vw(5);
				color: #fff;
			}
		}
		.movie-message {
			font-size: px2vw($fz14);
			padding-left: px2vw(10);
			span {
				padding-right: px2vw(5);
				color: #ef6f5f;
			}
		}
		.hall-num {
			font-size: px2vw($fz14);
			padding-left: px2vw(10);
			padding-top: px2vw(5);
		}
		.serial-number--container {
			width: px2vw(200);
			height: px2vw(75);
			background-color: $bgc-base;
			margin: px2vw(20) auto;
			border-radius: px2vw(5);
			p {
				font-size: px2vw($fz16);
				text-align: center;
				&:nth-child(1) {
					padding-top: px2vw(15);
				}
			}
		}
		#qrcode {
			width: 110px;
			// width: px2vw(200);
			// height: px2vw(75);
			// background-color: $bgc-base;
			margin: px2vw(30) auto px2vw(20) auto;
			// border-radius: px2vw(5);
			// img {
			//	 width: 100%;
			//	 height: 100%;
			// }
		}
		.out-notice {
			font-size: px2vw($fz14);
			text-align: center;
			color: $c-light;
			margin-bottom: px2vw(30);
		}
		.order-details--container {
			width: px2vw(355);
			border-top-left-radius: px2vw(10);
			border-top-right-radius: px2vw(10);
			border-top: px2vw(1) dashed #ddd;
			p {
				line-height: px2vw(44);
				&:not(:last-child) {
					border-bottom: px2vw(1) solid #ddd;
				}
				margin: 0 px2vw(10);
				font-size: px2vw($fz14);
				text-align: right;
				span {
					display: block;
					float: left;
					color: $c-light;
					text-align: left;
				}
				em {
					font-weight: bold;
					padding-left: px2vw(5);
					font-style: normal;
					color: #f24244;
				}
			}
		}
		.circle {
			width: px2vw(20);
			height: px2vw(10);
			position: absolute;
			margin: auto;
			background-color: #f5f5f5;
			border-radius: 50px 50px 0 0;
		}
		.circle-left {
			-ms-transform: rotate(90deg); /* IE 9 */
			-moz-transform: rotate(90deg); /* Firefox */
			-webkit-transform: rotate(90deg); /* Safari 和 Chrome */
			-o-transform: rotate(90deg); /* Opera */
			left: -1.33333vw;
			top: px2vw(40);
		}
		.circle-right {
			-ms-transform: rotate(-90deg); /* IE 9 */
			-moz-transform: rotate(-90deg); /* Firefox */
			-webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
			-o-transform: rotate(-90deg); /* Opera */
			right: -1.33333vw;
			top: px2vw(40);
		}
		.circle-order-left {
			-ms-transform: rotate(90deg); /* IE 9 */
			-moz-transform: rotate(90deg); /* Firefox */
			-webkit-transform: rotate(90deg); /* Safari 和 Chrome */
			-o-transform: rotate(90deg); /* Opera */
			left: -1.33333vw;
			top: px2vw(443);
		}
		.circle-order-right {
			-ms-transform: rotate(-90deg); /* IE 9 */
			-moz-transform: rotate(-90deg); /* Firefox */
			-webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
			-o-transform: rotate(-90deg); /* Opera */
			right: -1.33333vw;
			top: px2vw(443);
		}
	}
}
</style>
